/**
 *标品工艺 配置价格组件
 *
 */

var htmlCodes = [
    '<div id="appDialogCraftPrice" v-cloak>',
    '    <el-dialog  :visible.sync="dialogCraftPriceVisible"  fullscreen>',
    '        <el-row :gutter="50">',
    '            <!--左侧table显示-->',
    '            <el-col :span="6" >',
    '                <div style="padding-bottom: 13px">',
    '                    <h5>{{title}}</h5>',
    '                </div>',
    '                <div >',
    '                    <el-table',
    '                            ref="goodsCraftAttributeTable"',
    '                            :data="goodsCraftAttributeData"',
    '                            border="true"',
    '                            size="small"',
    '                            highlight-current-row="true"',
    '                            style="width: 100%"',
    '                            max-height="650"',
    '                            @row-click="goodsCraftAttributeClicked"',
    '                         >',
    '                        <el-table-column',
    '                                prop="attributeName"',
    '                                label="工艺名称"',
    '                                >',
    '                        </el-table-column>',
    '                        <el-table-column',
    '                                prop="craftFormula"',
    '                                label="算价公式"',
    '                        >',
    '                        </el-table-column>',
    '                    </el-table>',
    '                </div>',
    '            </el-col>',
    '            <!--右侧table显示-->',
    '            <el-col :span="18">',
    '                <div style="padding-bottom: 15px">',
    '                    <el-button-group >',
    '                        <el-button type="primary" size="small"  icon="el-icon-news" @click="saveGoodsCraftPrice">批量保存</el-button>',
    '                        <el-button type="warning" size="small" icon="el-icon-setting" @click="oneKeySetPrice">一键设价</el-button>',
    '                        <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteCraftPrice">删除</el-button>',
    '                    </el-button-group>',
    '                </div>',
    '                <div>',
    '                    <el-table',
    '                            ref="goodsCraftOptionTable"',
    '                            :data="goodsCraftOptionData"',
    '                            @select="goodsCraftOptionSelected"',
    '                            @select-all="goodsCraftOptionSelectedAll"',
    '                            stripe="true"',
    '                            border="true"',
    '                            size="small"',
    '                            highlight-current-row="true"',
    '                            style="width: 100%"',
    '                            max-height="650"',
    '                            >',
    '                        <el-table-column  type="selection"  width="55"> </el-table-column>',
    '                        <el-table-column  prop="optionName" label="选项名称"></el-table-column>',
    '                        <el-table-column  prop="influenceName" label="影响工艺价选项"></el-table-column>',
    '                        <el-table-column label="单价(元)" width="120">',
    '                            <template slot-scope="scope">',
    '                                <el-input size="small" v-model="scope.row.unitPrice" ></el-input>',
    '                            </template>',
    '                        </el-table-column>',
    '                        <el-table-column prop="province" label="起步价(开机费)元" width="120">',
    '                            <template slot-scope="scope">',
    '                                <el-input size="small" v-model="scope.row.minBeginPrice" ></el-input>',
    '                            </template>',
    '                        </el-table-column>',
    '                        <el-table-column prop="province" label="模板费元" width="120">',
    '                            <template slot-scope="scope">',
    '                                <el-input size="small" v-model="scope.row.fixedPrice" ></el-input>',
    '                            </template>',
    '                        </el-table-column>',
    '                        <el-table-column   label="利润系数" width="100">',
    '                            <template slot-scope="scope">',
    '                                <el-input size="small" v-model="scope.row.floatCoefficient" ></el-input>',
    '                            </template>',
    '                        </el-table-column>',
    '                        <el-table-column   label="阶梯价格" width="100">',
    '                            <template slot-scope="scope">',
    '                                <el-popover trigger="hover" placement="top" >',
    '                                    <p>{{ scope.row.stepPrice }}</p>',
    '                                    <div slot="reference" class="name-wrapper">',
    '                                        <el-button size="small" slot="append" icon="el-icon-setting" @click="openStepPriceDialog(scope.row)">阶梯价</el-button>',
    '                                    </div>',
    '                                </el-popover>',
    '                            </template>',
    '                        </el-table-column>',
    '                    </el-table>',
    '                </div>',
    '            </el-col>',
    '        </el-row>',
    '    </el-dialog>',
    '    <!--阶梯价格弹窗-->',
    '    <el-dialog',
    '            title="阶梯价格设置"',
    '            :visible.sync="stepPriceDialogVisible"',
    '            width="600px"',
    '    >',
    '        <div>',
    '            <el-table',
    '                    ref="stepPriceTable"',
    '                    :data="stepPriceData"',
    '                    stripe="true"',
    '                    border="true"',
    '                    size="small"',
    '                    highlight-current-row="true"',
    '                    style="width: 100%"',
    '                    max-height="400">',
    '                <el-table-column  label="开始数量" width="100">',
    '                    <template slot-scope="scope">',
    '                        <el-input size="small" v-model="scope.row.beginNum" ></el-input>',
    '                    </template>',
    '                </el-table-column>',
    '                <el-table-column  label="结束数量" width="100">',
    '                    <template slot-scope="scope">',
    '                        <el-input size="small" v-model="scope.row.endNum" ></el-input>',
    '                    </template>',
    '                </el-table-column>',
    '                <el-table-column  label="单价" width="100">',
    '                    <template slot-scope="scope">',
    '                        <el-input size="small" v-model="scope.row.singlePrice" ></el-input>',
    '                    </template>',
    '                </el-table-column>',
    '                <el-table-column  label="备注" width="150">',
    '                    <template slot-scope="scope">',
    '                        <el-input size="small" v-model="scope.row.remark" ></el-input>',
    '                    </template>',
    '                </el-table-column>',
    '                <el-table-column',
    '                        label="操作"',
    '                        width="100">',
    '                    <template slot-scope="scope">',
    '                        <el-button',
    '                                @click.native.prevent="addOneStepPrice"',
    '                                type="text"',
    '                                size="small">',
    '                            添加',
    '                        </el-button>',
    '                        <el-button',
    '                                @click.native.prevent="deleteOneStepPrice(scope.$index, stepPriceData)"',
    '                                type="text"',
    '                                size="small">',
    '                            删除',
    '                        </el-button>',
    '                    </template>',
    '                </el-table-column>',
    '            </el-table>',
    '        </div>',
    '        <span slot="footer" class="dialog-footer">',
    '                <el-button size="small" @click="stepPriceDialogVisible = false">取 消</el-button>',
    '                <el-button size="small" type="primary" @click="saveStepPrice">保存</el-button>',
    '            </span>',
    '    </el-dialog>',
    '    </div>',
    '</div>',

].join("");
Vue.component('zy-goods-craft-price', {
    template: htmlCodes,
    data:function() {
        return {
            templateId: null,
            attributeId: null,
            dialogCraftPriceVisible: false,// 主窗体是否显示
            stepPriceDialogVisible: false, // 阶梯价窗体是否显示
            title: null, // 标题
            goodsCraftAttributeData: [],// 基础商品属性table
            goodsCraftDataRow: null, // 当前行工艺
            goodsTemplateData: null, //模板信息
            goodsCraftOptionData: [],// 基础商品工艺选项table
            stepPriceData: [],// 阶梯价格table
            stepPriceRow: null, //当前阶梯价所在option 行
        }
    },
    mounted: function () {
        //this.setData({templateId:this.$props.templateId,attributeIds:this.$props.attributeId});
    },
    methods:{

        // 赋值进入
        setData : function (data) {
            debugger;
            //data 模板id + 工艺ids
            if(isBlank(data.templateId)){
                alert("模板不能为空");
                return;
            }
            if(isBlank(data.attributeId)){
                alert("工艺不能为空");
                return;
            }
            this.templateId = data.templateId;
            this.attributeId = data.attributeId;
            //请求后台加载该模板下的工艺ids以及对应的价格
            var self = this;
            $.get(baseURL + "goodsCraftPrice/goodscraftprice/getGoodsTemplateCraftPriceWindowList?" +
                "templateId="+self.templateId+"&attributeIds="+self.attributeId, function (r) {
                if(r.code = 200 ){
                    // 赋值工艺列表
                    self.goodsCraftAttributeData = r.goodsCraftPriceData.goodsCraftList;
                    //赋值模板信息
                    self.goodsTemplateData = r.goodsCraftPriceData.goodsTemplate;
                    //重新赋值stepPrice
                    if (r.goodsCraftPriceData.goodsCraftPriceList) {
                        for (var i = 0; i < r.goodsCraftPriceData.goodsCraftPriceList.length; i++) {
                            var temp = r.goodsCraftPriceData.goodsCraftPriceList[i];
                            if (temp.stepPrice) {
                                temp.stepPrice = JSON.parse(temp.stepPrice);
                            }
                        }
                    }
                    // 赋值选项列表
                    self.goodsCraftOptionData = r.goodsCraftPriceData.goodsCraftPriceList;
                    //打开窗体
                    self.dialogCraftPriceVisible = true;
                    self.title = "模板【"+self.goodsTemplateData.templateName+"】价格配置";
                }else {
                    alert(r.msg);
                }

            });

        },

        // 工艺前行点击事件
        goodsCraftAttributeClicked: function (row, event, column) {
            // 解析商品模板 返回选项
            var data = {'attributeId': row.attributeId, 'goodsTemplate': this.goodsTemplateData};
            var self = this;
            $.ajax({
                type: "POST",
                url: baseURL + "goodsCraftPrice/goodscraftprice/getGoodsTemplateOptionList",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (r) {
                    if (r.code == 0) {
                        self.goodsCraftOptionData = r.goodsCraftOptionPriceList;
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },

        /*设置阶梯价格*/
        openStepPriceDialog: function (row) {
            //先初始化数据
            if (row.stepPrice) {
                this.stepPriceData = row.stepPrice;

            } else {
                this.stepPriceData = [];
                var temp = {"beginNum": null, "endNum": null, "singlePrice": null, "remark": null};
                // 加入一条空白数据
                this.stepPriceData.push(temp);
            }

            // 保留当前option 所在行
            this.stepPriceRow = row;
            this.stepPriceDialogVisible = true;
        },

        /*保存阶梯价*/
        saveStepPrice: function () {
            //todo 数据校验

            var row = this.stepPriceRow;

            row.stepPrice = this.stepPriceData;

            // 清空临时数据
            this.stepPriceRow = null;
            this.stepPriceData = [];
            this.stepPriceDialogVisible = false;
        },

        /*添加一行阶梯价*/
        addOneStepPrice: function () {
            var temp = {"beginNum": null, "endNum": null, "singlePrice": null, "remark": null};
            this.stepPriceData.push(temp);
        },

        /*删除一行数据*/
        deleteOneStepPrice: function (index, rows) {
            if (rows.length > 1) {
                rows.splice(index, 1);
            }
        },

        /*一键设置价格为第一行价格*/
        oneKeySetPrice: function () {
            this.$confirm('确定要把所有选项价格一键设置为第一行价格吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function()  {
                // 取出第一行数据
                for (var i = 1; i < this.goodsCraftOptionData.length; i++) {
                    // 从第二行开始 赋值
                    var temp = this.goodsCraftOptionData[i];
                    temp.unitPrice = this.goodsCraftOptionData[0].unitPrice;
                    temp.minUnitPrice = this.goodsCraftOptionData[0].minUnitPrice;
                    temp.minBeginPrice = this.goodsCraftOptionData[0].minBeginPrice;
                    temp.floatCoefficient = this.goodsCraftOptionData[0].floatCoefficient;
                    temp.stepPrice = this.goodsCraftOptionData[0].stepPrice;
                    temp.fixedPrice = this.goodsCraftOptionData[0].fixedPrice;
                }
                // 并全部勾选
                this.$refs.goodsCraftOptionTable.toggleAllSelection();


            }).catch(function()  {
                this.$message({type: 'info', message: '已取消一键设价'});
            })

        },

        //选中选项
        goodsCraftOptionSelected: function (selection, row) {
            var selected = selection.length && selection.indexOf(row) !== -1;
            if (selected) {
                // 如果是选中 则把 几个为null的价格设置为 0
                row.unitPrice = row.unitPrice == null ? 0 : row.unitPrice;
                row.minUnitPrice = row.minUnitPrice == null ? 0 : row.minUnitPrice;
                row.minBeginPrice = row.minBeginPrice == null ? 0 : row.minBeginPrice;
                row.fixedPrice = row.fixedPrice == null ? 0 : row.fixedPrice;
                row.floatCoefficient = row.floatCoefficient == null ? 0 : row.floatCoefficient;
                // 如果同时为0 给出提示
                if (row.unitPrice == 0 && row.minUnitPrice == 0 &&
                    row.minBeginPrice == 0 && row.fixedPrice == 0 &&
                    row.floatCoefficient == 0){
                    this.$message({type: 'info', message: '所勾选价格全部为0 请注意确认 !'});
                }
            }

        },

        //全选
        goodsCraftOptionSelectedAll: function (selection) {
            if (selection.length >0){//全选中
                for (var i=0; i< selection.length;i++){
                    var row = selection[i];
                    // 循环将null转为0
                    row.unitPrice = row.unitPrice == null ? 0 : row.unitPrice;
                    row.minUnitPrice = row.minUnitPrice == null ? 0 : row.minUnitPrice;
                    row.minBeginPrice = row.minBeginPrice == null ? 0 : row.minBeginPrice;
                    row.fixedPrice = row.fixedPrice == null ? 0 : row.fixedPrice;
                    row.floatCoefficient = row.floatCoefficient == null ? 0 : row.floatCoefficient;
                    // 如果同时为0 给出提示
                    if (row.unitPrice == 0 && row.minUnitPrice == 0 &&
                        row.minBeginPrice == 0 && row.fixedPrice == 0 &&
                        row.floatCoefficient == 0){
                        this.$message({type: 'info', message: row.optionName +"-"+row.influenceName +"所在行价格都为0 请注意查看!"});
                    }
                }

            }

        },


        /*保存基础商品工艺价格*/
        saveGoodsCraftPrice: function () {
            var postData = [];
            // 先拷贝一个数据 避免页面数据错误
            var newSelectionObject = jQuery.extend(true, [], this.$refs.goodsCraftOptionTable.selection);
            for (var index  in newSelectionObject) {
                var currentSelection = newSelectionObject[index];
                if (currentSelection.stepPrice) {
                    currentSelection.stepPrice = JSON.stringify(currentSelection.stepPrice);
                }
                // 放入当前模板id
                currentSelection.templateId = this.goodsTemplateData.templateId;
                postData.push(currentSelection);
            }

            if (postData.length == 0) {
                this.$message.error('至少选中一个工艺选项 !');
                return;
            }
            if (postData.length > 30) {
                this.$message.error('一次最多添加30个工艺选项价格 !');
                return;
            }
            var self = this;

            $.ajax({
                type: "POST",
                url: baseURL + "goodsCraftPrice/goodscraftprice/save",
                contentType: "application/json",
                data: JSON.stringify({"craftPriceList": postData}),
                success: function (r) {
                    if (r.code === 0) {
                        self.$message({message: '保存成功 !', type: 'success'});
                    } else {
                        alert(r.msg);
                    }
                }
            });


        },


        /*根据选中工艺价格删除*/
        deleteCraftPrice: function () {
            // 取出所有选中的工艺价格
            var selected = this.$refs.goodsCraftOptionTable.selection;
            if (selected.length == 0) {
                this.$message.error('至少选中一个工艺价格 !');
                return;
            }
            var postIds = [];
            var selectedCraftPriceIds = [];
            for (var index in selected) { //循环选中项
                if (selected[index].craftPriceId) {
                    //后台存在真是数据
                    postIds.push(selected[index].craftPriceId);
                    selectedCraftPriceIds.push(selected[index]);
                } else {
                    this.goodsCraftOptionData.splice($.inArray(selected[index], this.goodsCraftOptionData), 1)
                    //仅前台页面数据 直接删除即可
                }
            }

            var self = this;
            if (postIds.length > 0) {
                // 后台ajax 请求删除
                this.$confirm('确定要删除已配价选项吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    $.ajax({
                        type: "POST",
                        url: baseURL + "goodsCraftPrice/goodscraftprice/deleteByIds",
                        contentType: "application/json",
                        data: JSON.stringify(postIds),
                        success: function (r) {
                            if (r.code == 0) {
                                self.$message({message: '删除成功 !', type: 'success'});
                                self.initData();
                                // 此处循环删除页面
                                /*  for(var selectedCraftPriceId in selectedCraftPriceIds){
                                      self.goodsCraftOptionData.splice($.inArray(selectedCraftPriceId, self.goodsCraftOptionData), 1)
                                  }*/
                            } else {
                                alert(r.msg);
                            }
                        }
                    });
                }).catch(function()  {
                    this.$message({type: 'info', message: '已取消删除'});
                })
            }

        },
    },

});

